All right, so in the last part, we set up a brand new camera view and animation for the background
of our main menu, and in this part, we are going to start actually working on this whole menu structure.
So let's just hop right into it and start out by creating our first budget blueprint.
So we're going to go to our main menu folder here.
We're going to right click go to user interface and create a widget blueprint.
So I'm just going to name this menu.
Background and you'll see why in just a moment, and we're just going to double click this to open it
up and now we are in the editor.
So if you are not familiar with the widget blueprint editor here, I'm just going to go over it briefly
here.
So basically, we've got a canvas here, which is basically the outline of our, you know, our players
screen.
And to this we can add things like images, we can add buttons.
You know, if we're working on a menu, we can add a progress bar in here.
If we are working on a health or stamina system, we've got things like text for item descriptions,
check boxes for, you know, game settings and stuff like that, and a lot of other things to.
There are a lot of complex systems that you can create in which blueprints?
It's it's really honestly it's quite fun to work with.
And I definitely recommend that you get into some of the more advanced stuff here.
But the main things that we are going to be using in in this course are going to be the text block,
which is pretty simple.
You can drag in a text block here and then over on the details panel, we can edit all kinds of settings
for this, most notably the actual text that's in the text block so we can just say hi and boom.
Now we have a text that we can put on screen in this position that says, hi, pretty fantastic stuff.
Next thing that we're going to be using a lot is a button and a button is made so that you can register
custom events when players click on it.
So that's basically what all of these different things are doing.
All of these like action oriented, you know, widget pieces, for example, you know, like a checkbox.
It gives you a custom event.
When you check this box, as you can see, whenever you add something to a widget and if you select
it and go down to the bottom of the screen, you can see all of the different kinds of event at this
specific piece of your widget, you know, can be used for.
So we have an event here that will allow us to, you know.
Do something whenever the status of this checkboxes has changed, so if we check the box, it'll call
an event and tell us, hey, the box has been checked or it's been unchecked or whatever for the slider,
we can get events when when the value has changed, stuff like that.
So the next important thing with widgets is going to be anchoring.
So really quickly, I want to go over how this works.
So let's say I have an image or let's say I've got a progress bar or something like this.
Right.
I've got my my health bar up in the corner of the screen.
You can see when I have this selected, there's this flower looking thing up in the top left corner.
And this is the anchor point of this this actor.
And what this does is it makes it so that no matter what the screen size is, right.
Because, you know, let's say you've got somebody playing at a weird resolution or they're playing
on a cell phone or they're playing on their TV or a widescreen monitor, something like that.
You can see by dragging this little arrow in the corner here, you can see exactly how this actor up
in the corner here is going to respond to different screen sizes.
So when the flower here, the flower when the anchor point is up in the top left corner of the screen,
you can see it's basically just staying.
The progress bar actor is staying relative to that corner of the screen.
So I'll just put this back at the default size here.
If I was to anchor it to the let's just say to the right corner of the screen here, and I do that by
selecting the actor and then going into the details panel to the anchors section.
And then you just hit this dropdown that you can select where you're at your.
Your actors anchored to right, so if I select that now, you can see it's moving relative to the right
corner of the screen.
So this is something very important when it comes to designing your menus and making sure that everything
displays properly on any size of screen.
All right.
So the next thing that I want to briefly go over is the animation timeline.
So just like we've got our level sequences in here, like we used for our camera view, we have animations
which are very, very similar.
They work in a similar way and they do similar things as you would probably expect.
So let's say we had a text block here and we created a new animation, which we do by just hitting this
plus animation button here, and I just call this test or something, says Tetes.
But the my point persists.
So if we just make this animation here, Selecta, you know, it's a piece of our our widget, let's
say this text block and we add this to our track, just like we would in a sequence.
We can track different variables on this.
For example, the transform or the the opacity.
Let's say we were to just animate the city here.
We could just add a keyframe with an opacity of one, go to one second in, set the render opacity to
zero and just make sure we've got a keyframe in here and now, boom, we now have an animated piece
of text that we can, you know, play through our widget blueprints.
The actual blueprint, Ed, which we can switch to in our graph up here in the top right corner.
And we've got a lot of the same functionality here in the blueprint.
Would you blueprint timeline as we do in the level sequence, Aitor?
So if you have experience in there, this is going to be a breeze, you know, you can add as many different
actors to this timeline as you want.
You know, if we had 50 text blocks, you know, a widget, we could animate all of them in one animation.
And so this allows us to do a lot of really cool stuff and make things look really, really neat and
professional.
So I'm just going to delete that.
Delete that.
Although with this animation here, hopefully I'm not moving too fast here.
I'm sure all of this will make a lot more sense as we start applying these things and start actually
building out the this widget background here that that we have set out to.
But I think it's important to at least give a refresher to people who maybe have a little bit of experience
and, you know, to give you kind of a heads up of what's coming if if you don't have any experience
in here.
So.
With that kind of introduction here out of the way, let's get right into.
Actually putting this stuff together, so the first actor, the first thing that we're going to add
to our menu background is called a background alert.
So we just search for this here is going to be under the special effects category and we can just drag
this in.
And what we have is this random little box here, which seems pretty insignificant, and it is until
we do cool stuff with it.
So first, I'm just going to size this up by grabbing these corners here and I'm going to size this
to just fit kind of on the left side of the screen here.
Next thing that I'm going to do is I'm going to anchor it to the left side of the screen and I'm going
to use this one down here in the bottom left corner, because what this does is it makes it so that
however we scale the resolution, it will both scale upwards.
And it will stay on the left side and you could see if we were to anchor it simply to the left side,
it won't actually scale up and down.
When I moved closer here, you can see it just stays at a consistent side.
So we want it to be able to stretch up with the height of our players screen.
So let's make sure that that's anchored correctly and now we can do something really neat.
So let's zoom in here.
And with our background player selected, we're going to go over to our details panel, down to appearance
and to the blur strength.
So if we turn this to one, you might be able to see a little bit of a blurring effect on the the grid
here.
In the background I turn to you'll see a little more three, four or five, six, 10.
And you can see it's actually blurring the stuff back here, back behind this back grumbler.
So what this is going to do is going to add just a really nice kind of Glassey effect to all of everything
on this side of the screen.
And I'll just make for a nice backdrop for our techs to make it more readable and just make it look
more professional.
So I'm going to set the Blu strength to 7:00.
You can play around with that as much as you like and just find something that you think looks good.
And then when I'm going to do is I'm going to grab an image.
And what I'm going to do with this image is I'm going to drag it directly on top of this background
blur.
And now you can see here in our hierarchy panel, this has just become a child actor of our background,
our panel.
So just like anywhere else in the engine or basically any other 3D editor or a lot of programs, you're
probably familiar with the whole idea of a parent child relationship between, you know, different
things inside of a game or project.
And so simply what this will do in this case is it just perfectly scales our image to the same size
as our background color.
And what I'm going to do with this is I'm just going to select this image.
I'm going to go over to the details panel to the color and opacity it's going to select this year.
I'm going to turn the color down to black and I'm going to turn the alpha to point to maybe point three.
And so what this will do is this will just darken this area this way.
Are, you know, the white text that we're going to be putting on our buttons and on our logo and stuff
on top of here will just be easier to read for players and just make things look more professional,
more better.
It's good design this way.
So obviously, if we wanted to remove this image from the background blur, if we didn't want it to
be a child actor of this anymore than what we can do is we just drag it up and make it a child of the
canvas panel, which is the default boundaries here, basically, or if we want to put it back, we
could just drag it back on to the background layer and then we're right back where we were.
So you to save this, that's all set.
Next thing that I'm going to do is I'm going to grab another image.
And this one I'm just going to drag off to the side here first and then I'm going to drag it above my
actual widget.
And this is going to be my logo.
So if you have a game logo or something, then what you can do is you can drag an image in here, make
sure it's anchored to the top left corner, and then apply that logo image to this here.
So I'm just going to import a just a logo image that I have to demonstrate.
OK, so I have just imported in this image texture.
This is just a logo from one of my own games.
So I'm just going to use this.
And so now back in our widget blueprint with this new image selected, if I go over to the rush and
to the image section here, I can select that logo.
So I'll just search for it here.
Grab that.
And now you can see we have this image and we can just scale this appropriately so that it fits nicely
in here.
I'm pretty happy with with something like that.
And now, you know, we can we can go down here and just drag this our screen size around just to make
sure everything looks OK.
And I think it does just compile save and we are good to go.
Now, one problem that you may run into while doing stuff like this, while you're kind of layering
images on top of images, on top of background layers and texts and all this stuff is you might end
up with a image on top of something that you actually want it to be underneath.
So over here in the hierarchy, panel, anything that is lower down on the hierarchy list is going to
be higher in the actual widget panel here.
So the canvas panel is at the very bottom, the background color is right above it, the image that
we put on the back, grumbler is on top of that and this is on top of that.
So if we want to adjust these things, we can just drag them through the hierarchy and place them wherever
we want.
So in this case, I've just grabbed my logo and I just dragged it behind the back grumbler.
You can see this pretty clearly because you could see the logo is now all blurry.
So I want to adjust that and bring it back up.
I can just adjust it like so.
And now it's back on top.
So I'll just compile this, say this.
And then there's one last thing that I want to add in here that you can add to.
And this is just going to be a text block, so I'm going to grab this text block, I'm going to bring
it down and I'm going to put it in the kind of the bottom corner, bottom left corner here.
And this is going to be my copyright notice because why not every every good human has a copyright notice,
right?
So first thing, I'll anchor it to the bottom left corner here.
That way it just stays down there.
Next, I'll switch this to copyright.
Uh.
Kevin, GNB, the twenty twenty one boom, just like that and you might notice is kind of ugly because
it is.
So I'm going to grab this again here and I'm going to scroll down.
I'll just make sure my text is aligned to the left or the left justification.
You know, I could adjust the color of this if I wanted.
I could make it red or it's kind of more pink, but I just want it to be white.
Um, and I can scroll down.
I'm looking for the text size.
I believe that's going to be the font tab here.
So if we go to appearance and then to font, we can switch the font itself.
I'll just switch to Raboteau tiny because that looks a little nicer and then I'll change the size of
sizes down to maybe 15, 20, 15, 15.
Looks pretty decent.
And I'll just make sure this is aligned nicely down there in the corner and now we've got a glorious
little copyright notice, we've got our logo.
And we've got a nice blurred background thing, so this looks really good, but right now it's just
sitting here in this random blueprint's object thing and it's not on our screen.
If we play our game, it is nowhere to be seen.
So before this video ends, we're going to add it in here so that we can feel like we accomplished something.
So let's go ahead and do that.
We're going to go into our level blueprint here and right after we start playing our level sequence
of our camera, kind of just moving back and forth, what we're going to do is we're going to create
a widget and this widget is going to be the one that we just created menu backgrounds.
We're going to add it to the viewport.
Compile and save our game, and if we play, we can see we have this glorious start to our main menu,
you know, we got this awesome blurring effect going on back here.
It looks great.
You know, we can scale our screen, however, and it still looks good.
So that is that is what we have accomplished.
Great job, everyone.
Fantastic job.
And I will see you in the next part.